<template>
  <div class="page">
    <es-scroll :style="{height:ui.scrollHeight}">
    <p>欢迎：{{model.name}}</p>
    <mu-row gutter class="item">
      <mu-col width="100" tablet="100" desktop="100">
        <es-card class="indigoBg">
          <div slot="title">Tab应用</div>
          <div slot="content">
            <p>下部为导航菜单，点击导航菜单可以切换中间的内容。在新闻客户端上非常常见。</p>
          </div>
          <div slot="action">

                <mu-raised-button class="right" label="进入" @click="jumpTo('/Sub/Demo1')">
                </mu-raised-button>

          </div>
        </es-card>
      </mu-col>
    </mu-row>
    <mu-row gutter class="item">
      <mu-col width="100" tablet="100" desktop="100">
        <es-card class="deepOrangeBg">
          <div slot="title">宫格应用</div>
          <div slot="content">
            <p>每一个格子为一个导航按钮，点击可以跳转至相应的页面。在电商类APP上非常常见。</p>
          </div>
          <div slot="action">

            <mu-raised-button class="right"  label="进入" @click="jumpTo('/Sub/Demo2')">
            </mu-raised-button>

          </div>
        </es-card>
      </mu-col>
    </mu-row>
    <mu-row gutter class="item">
      <mu-col width="100" tablet="100" desktop="100">
        <es-card class="lightBlueBg">
          <div slot="title">全屏应用</div>
          <div slot="content">
            <p>没有导航条的应用，常用于天气预报等APP。</p>
          </div>
          <div slot="action">

            <mu-raised-button class="right" label="进入" @click="jumpTo('/Sub/Demo3')">
            </mu-raised-button>

          </div>
        </es-card>
      </mu-col>
    </mu-row>

    <mu-row gutter class="item">
      <mu-col width="100" tablet="100" desktop="100">
        <es-card class="purpleBg">
          <div slot="title">框架组件示例</div>
          <div slot="content">
            <p></p>
          </div>
          <div slot="action">

              <mu-raised-button  class="right" label="进入"  @click="jumpTo('/Sub/FrameworkDemo')">
              </mu-raised-button>

          </div>
        </es-card>
      </mu-col>
    </mu-row>
    </es-scroll>

  </div>

</template>

<script>

  import Model from '../store/navigate'


  export default{
    name: '',
    data(){
      return {
        model: {
          source: new Model(),
          name: ''
        },
        ui:{
            scrollHeight:$screen.height+'px'
        }

      }
    },
    methods: {
      load: function () {
        this.model.name = this.model.source.getName('xxxxxx')
      },
      jumpTo:function (url) {
        this.$router.push(url)
      }

    },
    beforeCreate(){

    },
    created(){

    },
    beforeUpdate(){

    },
    updated(){

    },
    beforeMount(){

    },
    mounted(){
      this.load()
    },
    beforeDestroy(){

    },
    destroyed(){

    },
    activated(){

    },
    deactivated(){

    }
  }


</script>

<style scoped>
 .main{
   position: fixed;
   width: 100%;
   height: 100%;
 }

  .item {
    margin-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .right{
    float:right;
    margin-right: 24px;
    margin-bottom: 12px;
  }
</style>
